<script setup lang="ts">
import { ref } from 'vue'
import TnTabs from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs.vue'
import TnTabsItem from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs-item.vue';
import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'
import {onLoad, onPullDownRefresh} from "@dcloudio/uni-app";
import {cancelOrderSubApi, cancelProjectApi, confirmationCompletedApi, myProjectListApi} from "@/api/home";
import NoData from "@/composables/noData/NoData.vue";
import {orderStatusV2} from "@/utils/constants";
import CustomNavBar from "@/composables/header/index.vue";
import {getNavBarHeight} from "@/utils/navBarHeight";
import TnModal from "@tuniao/tnui-vue3-uniapp/components/modal/src/modal.vue";
import {removeMarkdownSymbols} from "@/utils/common";
const currentTabIndex = ref(0);
const tabsData = [
  {
    text: '全部',
    value: 0,
  },
  {
    text: '进行中',
    value: 1,
  },
  {
    text: '已退款',
    value: 2,
  },
  {
    text: '已结束',
    value: 3,
  },

]
const getStatusText = (status: number) => {
  return orderStatusV2[status] || ''
}

const toDetail = (item: any) => {
  if(item.orderPayStatus === 7 || item.orderPayStatus === 0) {
    uni.navigateTo({
      url: `/pages/trade/tradeDetail/index?id=${item.id}`
    })
  } else {
    uni.navigateTo({
      url: `/pages/order/index?id=${item.id}`,
    })
  }
}

type dataItem = {
  id: string | number;
  title: string;
  orderPayStatus: number;
  categorySelectionOne: string;
  categorySelectionTwo: string;
  additionalServices: string;
  requirementDescription: string;
  startTime: string;
}
const dataList = ref<dataItem[]>([]);
const getData = async () => {
  const res = await myProjectListApi(tabsData[currentTabIndex.value].value);
  dataList.value = res?.data || [];
}

const confirmationCompleted = async (id: string) => {
  const res = await confirmationCompletedApi(id);
  if (res?.code === 200) {
    getData();
  } else {
    uni.showToast({
      title: res?.msg || '失败',
      icon: 'none'
    })
  }
}

const modalRef = ref();
const cancelProject = async (id: string) => {
  modalRef.value?.showModal({
    title: '提示',
    content: '确认取消订单吗？',
    showCancel: true,
    confirmText: '确认',
    cancelText: '取消',
    cancel: async () => {
      console.log('点击了确认按钮')
      return true;
    },
    confirm: async () => {
      const res = await cancelProjectApi(id);
      if (res?.code === 200) {
        await getData();
      } else {
        uni.showToast({
          title: res?.msg || '取消失败',
          icon: 'none'
        })
      }
      return true;
    },
  })

}

onPullDownRefresh(async () =>{
  await getData();
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 1000)
})

const toPage = () => {
  uni.navigateTo({
    url: '/pages/evaluate/index'
  })
}

onLoad(() => {
  getData();
})
</script>

<template>
  <view>
    <CustomNavBar title="订单管理" :isSearch="false" :is-back="true" >
      <template #other>
        <view>
          <TnTabs v-model="currentTabIndex" active-color="#165DFF" bar-color="#165DFF" :scroll="false" @change="getData">
            <TnTabsItem
                v-for="(item, index) in tabsData"
                :key="index"
                :title="item.text"
            />
          </TnTabs>
        </view>
      </template>
    </CustomNavBar>

    <view class="content" :style="{marginTop: getNavBarHeight() + 50 + 'px'}">
      <view class="content-item" v-for="(item, index) in dataList" :key="index">
        <view class="header">
          <view class="header-name">
            <view class="header-name-title"> {{ item.title }}</view>
            <view class="header-status" :class="{'header-status-v2': item.orderPayStatus === 7 || item.orderPayStatus === 0}">{{getStatusText(item.orderPayStatus)}}</view>
          </view>
          <view class="header-icon" @click="toDetail(item)">
            订单详情
            <TnIcon name="right"></TnIcon>
          </view>
        </view>
        <view class="tag-box">
          <view class="tag-list">
            <view class="tag-item" v-if="item.categorySelectionOne">{{item.categorySelectionOne}}</view>
            <view class="tag-item" v-if="item.categorySelectionTwo">{{item.categorySelectionTwo}}</view>
            <view class="tag-item" v-if="item.additionalServices">{{item.additionalServices}}</view>
          </view>
          <view class="price-text">￥{{item.totalPrice}}</view>
        </view>
        <view class="desc">
          需求描述：{{removeMarkdownSymbols(item.requirementDescription)}}
        </view>
        <view class="btn-box">
          <view class="time-text">接单时间：{{item.startTime}} </view>
        </view>
        <view  class="btn-box">
          <view></view>
          <view class="btn-list">
            <view class="btn-info" v-if="item.orderPayStatus === 3" @click="cancelProject(item.id)">取消订单</view>
            <view class="btn-primary" v-if="item.orderPayStatus === 3" @click="confirmationCompleted(item.id)">确认完成</view>
            <view class="btn-info" v-if="item.orderPayStatus === 7" @click="toPage">订单评价</view>
          </view>
        </view>

      </view>
      <NoData v-if="dataList.length === 0"></NoData>
      <TnModal ref="modalRef" />
    </view>
  </view>
</template>

<style scoped lang="scss">
.content-item {
  width: calc(100% - 64rpx);
  border-radius: 8px;
  background: #FFFFFF;
  margin-left: 32rpx;
  margin-top: 16rpx;
  padding: 32rpx;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .header-name {
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
      display: flex;
      align-items: center;
      flex: 1;
      .header-name-title {
        flex: 1;
        display: inline-block;
        width: 150px;
        overflow: hidden;            /* 超出隐藏 */
        white-space: nowrap;         /* 不换行 */
        text-overflow: ellipsis;     /* 超出用省略号 */

      }
      .header-status {
        border-radius: 80rpx;
        background: #ffffff;
        box-sizing: border-box;
        border: 1px solid #4B7BF5;
        height: 36rpx;
        margin-left: 20rpx;
        color: #4B7BF5;
        font-size: 20rpx;
        padding: 0 20rpx;
        line-height: 36rpx;
      }
      .header-status-v2 {
        background: #999999;
        color: #ffffff;
        font-size: 10px;
        border: 1px solid #999999;
      }
    }
    .header-icon {
      font-size: 24rpx;
      color: #666666;
      margin-left: 10px;
      min-width: 50px;
    }

  }
  .tag-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32rpx;
    .tag-list {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .tag-item {
        border-radius: 20rpx;
        background: #f5f5f5;
        font-size: 24rpx;
        color: #666666;
        padding: 6rpx 20rpx;
        margin-right: 16rpx;
      }
    }
    .price-text {
      font-size: 36rpx;
      color: #333333;
    }
  }
  .desc {
    font-size: 24rpx;
    color: #666666;
    margin-top: 28rpx;
    white-space: nowrap;       /* 不换行 */
    overflow: hidden;          /* 超出隐藏 */
    text-overflow: ellipsis;   /* 超出部分用 ... 表示 */
  }
  .btn-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 28rpx;
    .time-text {
      font-size: 24rpx;
      color: #999999;
      overflow: hidden;
      width: 300rpx;
    }
    .btn-list {
      display: flex;
      align-items: center;
      .btn-info {
        border-radius: 2px;
        border: 1px solid #D8D8D8;
        font-size: 24rpx;
        color: #666666;
        padding: 15rpx 0;
        margin-left: 18rpx;
        min-width: 176rpx;
        text-align: center;
      }
      .btn-primary {
        border-radius: 2px;
        background: #4B7BF5;
        border: 1px solid #4B7BF5;
        color: #ffffff;
        font-size: 24rpx;
        padding: 15rpx 0;
        margin-left: 18rpx;
        min-width: 176rpx;
        text-align: center;
      }
    }
  }
}
</style>